"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { CalendarEvent, getEventsForDay } from "@/lib/calendar"
import { format } from "date-fns"
import { Clock, MapPin, Plus } from "lucide-react"

interface EventDetailsProps {
  selectedDate: Date | null
  events: CalendarEvent[]
}

export function EventDetails({ selectedDate, events }: EventDetailsProps) {
  if (!selectedDate) {
    return (
      <Card className="h-full">
        <CardHeader>
          <CardTitle>Events</CardTitle>
          <CardDescription>Select a date to view events</CardDescription>
        </CardHeader>
      </Card>
    )
  }

  const dayEvents = getEventsForDay(events, selectedDate)

  return (
    <Card className="h-full">
      <CardHeader className="flex flex-row items-center justify-between">
        <div>
          <CardTitle>{format(selectedDate, "EEEE, MMMM d, yyyy")}</CardTitle>
          <CardDescription>{dayEvents.length} events</CardDescription>
        </div>
        <Button size="sm">
          <Plus className="h-4 w-4 mr-2" />
          Add Event
        </Button>
      </CardHeader>
      <CardContent className="space-y-4">
        {dayEvents.length === 0 ? (
          <p className="text-muted-foreground text-center py-8">No events for this day</p>
        ) : (
          dayEvents.map((event) => (
            <Card key={event.id} className="overflow-hidden">
              <div className={`h-2 ${event.color || "bg-primary"}`} />
              <CardHeader className="p-4 pb-2">
                <CardTitle className="text-lg">{event.title}</CardTitle>
              </CardHeader>
              <CardContent className="p-4 pt-0 space-y-2">
                {event.time && (
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Clock className="h-4 w-4 mr-2" />
                    <span>{event.time}</span>
                  </div>
                )}
                {event.description && (
                  <p className="text-sm">{event.description}</p>
                )}
              </CardContent>
              <CardFooter className="p-4 pt-0 flex justify-end">
                <Button variant="outline" size="sm">Edit</Button>
              </CardFooter>
            </Card>
          ))
        )}
      </CardContent>
    </Card>
  )
}